Introduction & Assignment (Connecting the Frontend to the Backend)

Last updated: Jan 29th, 2024

I first learned how to build UIs w/ React and Redux by taking a Tyler McGinnis in my spare time in university while building a side project called “Univjobs”.

I recall struggling with React, Redux, and the particularly messy Webpack ecosystem around the early days of React.

I recall stumbling through features w/ my co-founder, watching the features take shape — yes, but taking shape in the form of a chaotic spaghetti mess based on things I had just learned how to do.

Routing was a mess. My Redux store was a mess (because everything was in it). Features kept on taking longer and longer to build.

Man, it was incredibly frustrating and demoralizing at the time… but the fact that thousands of people registered for our service, and some students even found jobs through it.. that made the entire ordeal worthwhile.

That early career experience taught me that that even if your Code-First MVP approach to solving a problem is a mess, it can still provide a ton of value.

All in all, I am eternally grateful for all of those experiences.

As a wise man once said, “sometimes you have to be cringe before you can be based”.

What’s next?

We’ve covered the top half of building a system. Now, the UI. To finish your assignment for this Phase of Craftship, your task is to finish the information system by tacking on the UI to interact with the backend.

An introduction to your next assignment

Here’s what’s next up on deck for us.

Assignment overview

Build and connect a UI to the existing backend which enables a user to perform the following use case/user experience: Starting from the main page, a user should immediately see the top rated posts in DDDForum. Then the user clicks the registration button in the menu, taking them to the registration page. From the registration page, the user enters their firstName, lastName, email & username to create an account. Upon success, they should see a success toast appear, and after 3 seconds, they should be redirected to the main page again. Their username should be present in the menu signalling that they’re logged in.

Let’s break this down, shall we?

Requirements

A walkthrough of the overall user experience

We’ve just read through a use case which explains what the user experience should look like from a user’s perspective.

Let’s take a look at what this should actually look like so you can implement it yourself. We’ll do this by looking at the screens.

Starting @ the Main Page

“Starting from the main page, a user should immediately see the top rated posts in DDDForum.”

That should look something like this.

Registration

“Then the user clicks the registration button in the menu (Join), taking them to the registration page.”

We’ll need a simple registration page to get this going.

Failure to register

If the user tries to register and it fails, then we should show a failure toast like so.

These failures are going to be based on the failures we’ve identified while building out the API in the last assignment.

So that’s: EmailAlreadyTaken, UsernameAlreadyTaken, InvalidUserInput.

Successful submission & redirect

“From the registration page, the user enters their firstName, lastName, email & username to create an account.”

“Upon success, they should see a success toast appear, and after 3 seconds, they should be redirected to the main page again.”

That’ll look like this!

And when you get redirected to the main page after a few seconds, you should be able to see your username that you’ve used to register.

In summary

Let’s summarize the requirements here.

  • start on the main page (”/”)
    • should show a list of posts
    • click on sign up
  • registration (”/registration”) page
    • should allow you to register with (firstName, lastName, email, username)
    • click submit
    • (optional) loading spinner shows
    • if failure, shows a failure toast
    • if success, shows a success toast and takes you back to main after 3 seconds
  • main page again (should show your username in the panel)

What you’ll focus on

Now, in terms of how to build this, from a Code-First perspective, it doesn’t matter.

Again, your goal here is just to make it work.

For the UI, you can use whatever you like for your frontend view (React, Vue, etc).

You can use whatever you like for state management (Redux, Context, etc).

And you can use whatever you like for styling — minimal or more complex tools. All you need to do at the moment is make it work and make it accurate.

If you’re here, I’m assuming that you know how to build basic stuff on the frontend. And if you don’t know how, I’m also assuming that you know how to use ChatGPT, Google & any other AI tools to push you along extremely fast.

As you’ll see me call out in the next lesson (and can review in my submission), I’m using React and React Context to make it work and I’m just going to do that — making it work.

Will not be using best coding practices. Will be keeping it extremely simple.

In Best Practice-First, we’ll make some changes, but it won’t be until Pattern-First that we really capitalize on the power of frontend patterns.

💡 Want to skip ahead? We’re going to go through this step by step, but if you’d like to dive ahead, you can read the implementation steps, grading checklist & submission instructions here.

What you’ll learn in this module

🖼️ Visual Summary

Here’s a visual summary of everything we’re going to cover in this submodule.

Step 1: Strategic Design — Translating screens into data, behaviour & namespace requirements

A wise developer once simplified design for me.

In the end, he says, it’s all just 3 things: data, behaviour, and namespaces.

We’ll investigate this simplistic, intuitive application of Strategic Design to break down the requirements for the final part of this Code-First assignment.

This will give us all the action items, libraries, folders we need to create, and so on.

Step 2: Horizontal Decoupling — Taking a UI-First approach to feature-development

I once polled developers across the community to answer how they typically kick off their work.

Most devs start w/ the UI components.

In Horizontal Decoupling, we’ll take a UI-first approach to build the screens & components out before getting into the functionality.

Step 3: Vertical Slicing — Setting up the Registration Functionality (Transaction Scripting on the Frontend)

Yet again, we’re using MVC on the frontend, or something similar to it, and what constitutes the M(odel) and the C(ontroller) is a bit ambigious.

Most of the time at this level, it looks like the V(iew) has a lot of M(odel) and C(ontroller) in it. This is again, a transaction script, but no worries. It works.

Luckily, because we don’t have too much logic we need to handle here (just a bit of validation and application logic), it’s good enough.

Step 4: Horizontal Decoupling — Updating, Migrating & Seeding the Database

Shifting over to the backend, thinking in terms of Horizontal Decoupling again — our awareness is entirely on the database work.

In this one, we place our focus entirely on the database design, models, migrations & think through how to seed the database with initial data for our Posts API.

Step 5: Vertical Slicing — Building the Posts API

In Vertical Slicing, with a proper database structure in place, we return to a focus on the feature itself.

Now, with a focus on the API again, we can introduce the final API call to return posts sorted by popularity to the UI using a query.

Step 6: Subject Verification — Manually Verifying It All Works

In Subject Verification, we have the same task to do — verifying that the application works. This time, you’ll be doing it manually by going through the UI.

You should run into the same error here of not being able to use the same username or email twice without completely nuking the database and starting over.

That means it’s working of course, but it’s not ideal to test this way.

We’ll fix that moving forward in BP-first.

By the end of this, you should have a UI which goes through some basic functionality and uses a backend to accomplish that.

This will cover all of the code-first essentials.

We’ll review everything we’ve covered, all the essentials we’ve used, and discuss when to move forward in the conclusion.

—

If you have any questions or suggestions to improve this lesson, leave a comment below.

As always,

To Mastery.